<template>
  <div>
    <mt-header title="意见反馈" style="background-color: white; color: black">
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back" style="color: black"></mt-button>
      </div>
    </mt-header>

    <div class="aboutContent">
      <div class="messText">问题和意见<span class="zhuyi">*</span></div>

      <div class="section_4">
        <textarea
          class="opinionBox"
          placeholder="请详细描述您的问题，我们将及时解决。"
          v-model="back"
          @input="descInput"
          style="font-size: 12px; font-weight: 500"
          maxlength="200"
        >
        </textarea>
        <span class="gray"> 字数限制:{{ enter }}/200</span>
      </div>

      <input
        class="youxiang"
        v-model="emailText"
        type="text"
        placeholder="请输入您的电子邮件，以便回复"
      />
    </div>

    <div class="section_5">
      <button class="text-wrapper" @click="go_mine">提交</button>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      enter: 0,
      back:'',
      emailText:'',
			txtVal:'',
      content:''
    }
  },
  methods:{
    // 意见反馈
			message(){
        let parms = `content=${this.back}`
        this.axios.post('/users/opinion', parms).then(res => {
						// this.back =res.data.content
             let back = this.content 
				})
			},
  // 内容监听
			descInput() {
			      var txtVal = this.back.length;
			      this.enter = txtVal;
			    },
    // 电子邮件判断
    emaill(){
      // if(!(/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(this.emailText))){
      //           let instance = Toast({
      //               message: "请填写正确邮箱！", 
      //               duration: 1000, //持续时间（毫秒），若为 -1 则不会自动关闭  
      //           });
      //               setTimeout(() => {
      //                   instance.close();
      //           }, 1000);
			
			// 		// return false;
			// 	}else{
      //     let parms = `email=${this.emailText}`
      //   this.axios.post('/users/opinion', parms).then(res => {
			// 			let email =this.emailText
      //       // let emailText =this.email
            
			// 	});
      //   this.$router.push('index/my');
			// }
      let parms = `email=${this.emailText}`
        this.axios.post('/users/opinion', parms).then(res => {
						let email =this.emailText
            // let emailText =this.email
            
				});
        },
        
      //提交
			go_mine(){
				if(this.back == '' || this.back == null || this.back.length <= 0 || this.emailText == '' ||!(/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/.test(this.emailText)) ){
          let instance = Toast({
                    message: "请正确填写内容或邮箱", 
                    duration: 1000, //持续时间（毫秒），若为 -1 则不会自动关闭  
                });
                    setTimeout(() => {
                        instance.close();
                }, 2000);
				}else{
          this.emaill();
				this.message();
           this.$router.push('index/my');
        }
			},
     },
  }
</script>

<style lang="scss" scoped>
body {
  background-color: #f7f8fa;
}
.aboutContent {
  padding: 1vh 3vh;
  box-sizing: border-box;
  //   background: rgba(242,244,247,1);
}
.messText {
  font-weight: 600;
  font-size: 18px;
  margin-top: 12px;
}
.zhuyi {
  color: red;
}
.aboutText {
  color: black;
  letter-spacing: 2px;
  line-height: 38px;
  font-weight: 500;
}
.section_4 {
  height: 200px;
  border-radius: 24rpx;
  // background: rgba(242,244,247,1);
  background-color: #fff;
  margin-top: 36px;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
}
.youxiang {
  border-radius: 10px;
  margin-top: 20px;
  width: 100%;
  padding: 15px 10px;
  box-sizing: border-box;
  font-size: 12px;
  border: none;
  background-color: white;
}
.gray {
  height: 34rpx;
  color: rgba(0, 0, 0, 0.6);
  font-size: 24rpx;
  font-weight: 400;
  text-align: left;
  line-height: 32rpx;
  letter-spacing: 0.6rpx;
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.opinionBox {
  border: none;
  font-size: 12px;
  width: 100%;
  height: 150px;
  background-color: #fff;
}
.text-wrapper {
  padding: 10px;
  width: 200px;
  height: 48px;
  border-radius: 22px;
  opacity: 1;
  border: 1px solid #00d4b8;
  background: #00d4b8;
  color: rgba(255, 255, 255, 1);
  font-size: 18px;
  font-weight: 500;
}
.section_5 {
  padding: 5px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>